<template>
  <div>
    <!-- 表格 -->
    <el-table
      :data="logList.records"
      style="width: 100%"
      text-align="center"
      height="182"
      highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      :header-cell-style="{ fontSize: '15px', color: 'rgb(83, 79, 79)' }"
      border
    >
      <el-table-column fixed prop="logContent" label="日志内容" width="595">
      </el-table-column>
      <el-table-column prop="logTime" label="日期" width="427">
      </el-table-column>
    </el-table>


     <!-- 页码 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="logList.pages * 10"
      @click="get()"
      @current-change="handleChange"
      style="margin-left: 100px; margin-bottom: 100px"
    >
    </el-pagination>

    <!-- 模糊查询 -->
      <session>
        <div>
          <fieldset style="width: 200px">
            <legend>查询日志信息</legend>
            <form action="" style="width: 260px">
              起&nbsp;始&nbsp;日&nbsp;期&nbsp;&nbsp;
              <input type="date" v-model="startTime" style="margin-top: 20px"/><br>
              结&nbsp;束&nbsp;日&nbsp;期&nbsp;&nbsp;
              <input type="date" v-model="endTime" style="margin-top: 20px;"/>
              <br />
              <input
                type="button"
                value="查询"
                @click="get()"
                style="margin-left: 140px;margin-top:10px"
              />
            </form>
          </fieldset>
        </div>
      </session>







  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
  data(){
    return{
      logId:"",
      logContent:"",
      logTime:"",
      startTime:"",
      endTime:"",
      list:[],
      pageNo:"",
      pages:""
    }
  },
  computed:{
    ...mapState("user",["logList","logParam"])
  },
  methods:{
    ...mapMutations("user",["setLogParam"]),
    ...mapActions("user",["findAllLog"]),
    ...mapActions("user",["findTime"]),
    get() {
      let paramObj = this.logParam;
      paramObj.startTime = this.startTime;
      paramObj.endTime = this.endTime;
      // 把最新的信息装入 store中的 param对象中
      this.setLogParam(paramObj);
      this.findTime()
    },
    handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    cut(pageNo) {
      let paramObj = this.logParam;
      paramObj.pageNo = pageNo;
      this.setLogParam(paramObj);
      this.findAllLog();
    },
     handleTableRow(row) {
      console.log(row.logId);
      this.logId = row.logId;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
  created(){
    this.findAllLog()
    console.log(this.logList.records)
  }
}
</script>

<style>
div > session {
  position: relative;
}
div> session > div:first-child {
  position: absolute;
  left: 140px;
  bottom: -145px;
}
</style>